<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .myinp{
            width: 250px;
        }
      
    </style>
</head>
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<body style=" background-color: #ffffff;">

    <ul>
        <li style="display: inline-block;margin-left:50px;margin-top: -40px; ">
            <div class="specs-settings"  >  
                <h2 style="color: #fff; padding-left:10px;padding-top: 10px;">规格类型选择</h2>  
                <!-- <div id="btntype" class="specs-actions">  
                    <img  class="add-specs-btn" style="padding-top: 10px; width:40px; height: 50px; cursor: pointer;" src="../images/ChildrenSpecs .png">  
                </div>  -->
            </div>  
            <div id="myTree" class="tree-container" style="margin-left: 7.5px; width: 350px; background-color: #ccc;"></div>      
        </li>
        <li style=" display: inline-block;position: absolute; top:20px;left:450px;" class="listy">
            <div class="layui-form layuimini-form" style="border:1px #ffffff;">
                
                <div class="layui-form-item" style="width: 350px;">
                    <label class="layui-form-label required">规格名</label>
                    <div class="layui-input-block" >
                        <input  type="text" name="Sname"   lay-verify="required" lay-reqtext="规格名不能为空" placeholder="请输入规格名"  value="" class="layui-input ">
                    </div>
                </div>
        
                
                <div class="layui-form-item" style="width: 350px;">
                    <label class="layui-form-label required">规格类型</label>
                    <div class="layui-input-block">
                        <input  type="text" name="Stype"  id="" readonly  value="" class="layui-input">
                    </div>
                </div>


                <div id="app">
                    <div class="layui-card">
                        <div class="layui-card-header" style="margin-left:70px;">
                            <h2>规格图片</h2>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-upload" style="margin-left:70px;">
                                <img id="pic" src="../images/combo_02.webp" style="width:100px;height:60px" alt="">
                                <button type="button" class="layui-btn" id="browser-pic" style="margin-left:35px">
                                    <i class="layui-icon">&#xe67c;</i>浏览图片
                                </button>

                            </div>
                        </div>
                    </div>
                </div>  
                    
                <div class="layui-form-item" style="margin-top:20px;margin-left: -140px;">
                    <div class="layui-input-block" >
                        <button  class="layui-btn layui-btn-normal" id="btn_ok" style="margin-left: -30px;" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
                
            </div>
        </li>
    </ul>

</body>     

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    var specs=[];
    var requrl="http://localhost:8080/restaurant_web_war_exploded/";
function ParentSpec(speid, spname) {
this.id = speid;
this.title = spname;
}

    layui.use(['form','upload','tree'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            tree=layui.tree,
            $=layui.$;

        function getTreeData (aaa){
          $.ajax({
            url: requrl+"specType/listSpecType",
            data:{"page":1,"limit":100},
            async: false,
            success:function (res){
                console.log(res.data.list);
                 treedata=res.data.list;
                 treedatalength=res.data.list.length;
                 for (let index = 0; index < treedata.length; index++) {
                  aaa.push(new ParentSpec(treedata[index].specTypeId,treedata[index].specTypeName))
                }
            }
        })
      }
      //获取规格类型  
      getTreeData(specs);
    
   var inp=$("input[name='Stype']");
        //树结构渲染
   tree.render({
    elem: '#myTree',
    data: specs,
    showLine: false,  // 是否开启连接线
    click: function(obj){
         $(inp).val(obj.data.title)
         $(inp).prop('id',obj.data.id)
        //执行搜索重载
        // table.reload('currentTableId', {
        //  where: {ScpeTypeId:obj.data.id},//模糊查询传值
        // page: {
        //      curr: 1,
        //     }
        // });
        typeid=obj.data.id
      }
  });

  var myfile;
  //第三：使用组件
  let uploadInst = upload.render({
            // 绑定浏览文件元素
            elem: '#browser-pic',
            
            // 设置允许上传的文件类型
            accept: 'file',

            // 设置允许上传的文件后缀
            exts: 'jpg|png|jpeg|gif|webp',

            // 设计允许上传文件的大小，单位：KB
            size: 10 * 1024,
                
            // 设置不自动上传
            auto: false,

            error: function (error) {			//上传失败的回调
                
            },
            choose: function (obj) {		//选择文件后的回调
                obj.preview(function (index, file, result) {
                    myfile=file;                     
                    //显示图片
                    $("#pic").prop("src", result);
                });
            }
        });

   //监听提交
   form.on('submit(saveBtn)', function (data) {
               // 创建一个 FormData 实例  
             var formData = new FormData();  

            formData.append('specTypeId',$(inp).prop('id'));
            formData.append('specName',data.field.Sname);
            formData.append('specFile',myfile);
            $.ajax({
                type:"post",
                url:requrl+"spec/insertSpec",
                data:formData,
                processData: false, // 告诉 jQuery 不要去处理发送的数据 
                contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头  
                success:function (res){
                    
                    if(res.errorCode==200){
                        var indexifr = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引

                        setTimeout(function(){
                        parent.layer.close(indexifr); // 关闭当前 iframe 弹层  
                        window.parent.postMessage('specssuccess', 'http://127.0.0.1:5500/index.html#/../html/speces_test02.html'); // '*' 表示目标源，慎用，建议使用具体的源          
                        },50)
                        
                    }
                }
            })
        });
    });
</script>
</html>